<template>
  <div class="header">
    <div class='back' @click.stock="back">
      <i class="iconfont icon-xiangzuo"/>
    </div>
    <div class="title" @click.stop="toStock(stock)">
      <span>{{title}}</span><span v-if="subTitle" class="sub-title">{{subTitle}}</span>
    </div>
    <div class="right-btns">
      <right-btn v-for="(item, index) in operation" :page="page" :key="item" :btn="item"></right-btn>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import constant from '@/common/constant'
  import RemoteDAO from '@/common/RemoteDAO'

  const TDAPP = window.TDAPP

  export default {
    name: 'HeaderTop',
    data () {
      return {}
    },
    props: {
      title: {
        type: String
      },
      subTitle: {
        type: String,
        default: ''
      },
      operation: {
        type: Array
      },
      page: {
        type: String
      },
      stock: {
        type: String,
        default: ''
      }
    },
    methods: {
      back () {
        if (this.$route.query.getmobile !== undefined || this.page === 'index') {
          window.location.href = 'gtjanormal://goback'
        } else {
          this.$router.go(-1)
        }
      },
      toStock (stock) {
        if (this.page === 'stock') {
          window.location.href = '@min=' + stock
        }
      }
    }
  }

  // 右侧按钮
  Vue.component('right-btn', {
    data () {
      return { //  按钮类名，icon图标类名，点击按钮的方法
        className: '',
        iconclass: '',
        clickMethod: function () {
        }
      }
    },
    props: {
      btn: {
        type: String
      },
      page: {
        type: String
      }
    },
    methods: {
      riskRemind () {
        this.$router.push('/warning')
      },
      share () {
        let tdId = ''
        let object = {}
        if (this.page === 'index') {
          tdId = '004004'
          object = {userCode: ''}
        } else if (this.page === 'stock') {
          tdId = '004014'
          object = {userCode: '', stockCode: JSON.parse(localStorage.getItem(this.page)).stock}
        }
        TDAPP.onEvent(tdId, '', object)
        TDAPP.send()
        RemoteDAO.sendShareData(this.page).then((data) => {
          let shareTitle = JSON.parse(localStorage.getItem(this.page)).shareTitle
          if (!shareTitle || shareTitle === '') shareTitle = '相似K线'
          let usercode = parseInt(Math.random() * 100000)
          let pageUrl = this.page === 'index' ? 'index' : 'stock'
          let args = {
            title: shareTitle,
            icon: '',
            content: '大数据智能精准匹配，海量数据帮你来找相似K线。快来找找和你的自选相似的股票吧！',
            moments: 'title',
            linkurl: 'https://dl.app.gtja.com/web/mainProject/xskx/' + pageUrl + '/index.html?userCode=' + usercode + '&url=' + data.data.url
            // linkurl: 'http://10.176.118.61:8080?userCode=' + usercode + '&url=' + data.data.url
          }
          RemoteDAO.share(args)
        })
      }
    },
    render: function (createElement) {
      var self = this
      if (self.btn === constant.Operation.SHARE) { // 分享
        self.className = 'btn-share'
        self.iconclass = 'iconfont icon-share'
        self.clickMethod = self.share
      } else if (self.btn === constant.Operation.RISK_REMIND) { // 风险提示
        self.className = 'btn-risk-remind'
        self.clickMethod = self.riskRemind
      }
      return createElement(
        'div',
        {
          attrs: {
            class: self.className
          },
          on: {
            click: function () {
              self.clickMethod()
            }
          }
        },
        [
          createElement('i', {
            attrs: {
              class: self.iconclass
            }
          })
        ]
      )
    }
  })
</script>

<style lang="less" rel="stylesheet/less" scoped>

  .btn-risk-remind {
    font-size: 28px;
    position: absolute;
    right: 20px;
    height: 88px;
    line-height: 88px;
    display: flex;
    align-items: center;
  }

  .btn-risk-remind:before {
    content: '风险提示'
  }
</style>
